<template>
  <el-dialog
    v-model="dialogVisibleNew"
    class="custom-dialog-prediction"
    width="631px"
    @closed="handleDialogClose"
  >
    <div class="dialog-content">
      <div class="info">
        <div class="title">{{ currentData.name }}</div>
        <div class="time">{{ timer }}</div>
      </div>
      <div class="dialog-content-echart">
        <div class="one-line">
          <div class="top-item" v-for="(item, index) in posList" :key="index">
            <div class="spot"></div>
            <div class="name">{{ item.name }}</div>
            <div class="value">{{ item.value }}</div>
          </div>
        </div>
        <div class="content-top">
          <div
            class="top-item-value"
            v-for="(item, index) in informationListTwo"
            :key="index"
          >
            <div class="left">
              <div :class="[`icon${index}`]"></div>
              <div class="value">{{ item.value }}</div>
              <div class="name">{{ item.name }}</div>
            </div>
            <div
              class="line"
              v-if="index != informationListTwo.length - 1"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import VChart from 'vue-echarts'
import apiList from '@/pages/integrated-monitoring/api/api'
import { useMonitoringStore } from '@/pages/integrated-monitoring/store/store'

const monitoringStore = useMonitoringStore()

const dialogVisibleNew = ref(false)
const chartRef = ref('')
const dialogTitle = ref('')
const currentData = ref({})
const defaultData = () => ({
  tem: '',
  pre1h: '',
  visHor10mi: '',
  rhu: '',
  winSAvg10mi: '',
  prs: ''
})

const currentStationData = ref(defaultData())
const stationLoading = ref(false)
const filterActive = ref('')
const currentChartData = ref([])
const currentChartType = ref('tem')
const posList = ref([])
const informationListTwo = ref([])
const threeList = ref([])
const timer = ref()
const handleInitData = async data => {
  stationLoading.value = true
  const res = await apiList.getWeatherFactsByCoordinate({
    latitude: data.lat,
    longitude: data.lon
  })
  if (!res.data) return
  timer.value = res.data.actuallyTime
  posList.value = [
    {
      name: '经度',
      value: data.lon.toFixed(4)
    },
    {
      name: '纬度',
      value: data.lat.toFixed(4)
    }
  ]
  informationListTwo.value = [
    {
      name: '气温',
      value: res.data.temperature + '℃'
    },
    {
      name: res.data.windDirection,
      value:
        res.data.windSpeed == '999999'
          ? '暂无数据'
          : res.data.windSpeed
          ? res.data.windSpeed + 'm/s'
          : 0
    },
    {
      name: '降水',
      value: res.data.rainfall + 'mm'
    },
    {
      name: '湿度',
      value:
        res.data.humidity == '999999'
          ? '暂无数据'
          : res.data.humidity
          ? res.data.humidity + '%'
          : 0
    }
  ]
  stationLoading.value = false
}
const handleStationDialogVisibleNew = (visible, data) => {
  dialogVisibleNew.value = visible
  if (data) {
    dialogTitle.value = `${data.stationName}（${data.stationNum}）`
    currentData.value = data
    handleInitData(data)
  }
}

useEventBus('handleStationDialogVisibleNew').on(handleStationDialogVisibleNew)

const handleDialogClose = () => {
  dialogTitle.value = ''
  currentData.value = {}
  currentChartType.value = 'tem'
  currentStationData.value = defaultData()
  currentChartData.value = []
}
</script>

<style scoped lang="scss">
.dialog-content {
  width: 100%;
  box-sizing: border-box;

  .info {
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 39px 0 21px;

    .title {
      font-weight: bold;
      font-size: 20px;
      color: #ffffff;
      line-height: 0px;
      text-shadow: 0px 0px 10px #000c5f;
      text-align: center;
      font-style: normal;
    }

    .time {
      font-weight: 400;
      font-size: 16px;
      color: #dde7ee;
      line-height: 0px;
      text-align: center;
      font-style: normal;
    }
  }
  .dialog-content-echart {
    height: 266px;
    margin-top: 15px;
    padding: 0 21px;
    box-sizing: border-box;
    .one-line {
      display: flex;
      justify-content: center;
    }

    .top-item {
      min-width: 131px;
      height: 42px;
      background: url(../images/contentData.png) no-repeat;
      background-size: 100% 100%;
      margin-right: 19px;
      margin-top: 15px;
      padding: 11px 16px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 5px;
      float: left;
      .spot {
        width: 4px;
        height: 4px;
        background: #a8eaff;
        box-shadow: 0px 0px 6px 1px rgba(0, 193, 255, 0.2);
        border-radius: 3px 3px 3px 3px;
        margin-right: 14px;
      }
      .name {
        font-weight: 400;
        font-size: 14px;
        color: #afd8e5;
        line-height: 0px;
        font-style: normal;
        margin-right: 11px;
        word-wrap: break-word;
      }
      .value {
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: 0px;
        font-style: normal;
      }
    }
    .content-top {
      width: 100%;
      height: 120px;
      padding: 0 3px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      .top-item-value {
        width: 125px;
        height: 88px;
        display: inline-block;
        margin-bottom: 5px;
        .left {
          width: calc(100% - 1px);
          float: left;
        }
        .line {
          float: right;
        }
        .icon0,
        .icon1,
        .icon2,
        .icon3,
        .icon4,
        .icon5 {
          width: 27px;
          height: 22px;
          background: url(../images/icon3.png) no-repeat;
          background-size: 100% 100%;
          margin-bottom: 18px;
          margin-left: 25px;
          margin-left: 50%;
          transform: translateX(-50%);
        }
        .icon1 {
          width: 17px;
          background-image: url(../images/icon2.png);
        }
        .icon2 {
          width: 23px;
          background-image: url(../images/icon0.png);
        }
        .icon3 {
          width: 21px;
          background-image: url(../images/icon1.png);
        }
        .icon4 {
          width: 31px;
          background-image: url(../images/icon4.png);
        }
        .icon5 {
          width: 24px;
          background-image: url(../images/icon5.png);
        }
        .value {
          width: 100%;
          text-align: center;
          margin-bottom: 25px;
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
          line-height: 20px;
          text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
        }
        .name {
          width: 100%;
          text-align: center;
          font-weight: 400;
          font-size: 14px;
          color: #afd8e5;
          line-height: 10px;
        }
      }
      .line {
        width: 1px;
        height: 32px;
        background-color: #5d6b75;
        margin-top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>
<style>
.el-overlay {
  z-index: 100000 !important;
}

.custom-dialog-prediction {
  background-color: transparent;
  height: 252px;
  background: url(../images/dialognew.png) no-repeat;
  background-size: 100% 100%;
}
</style>
